<template>
  <div class="demo-main">
    <div class="demo-register">
      <div class="demo-title">
        <h2>欢迎您的注册</h2>
      </div>
      <van-form @submit="register" label-align="center" colon>
        <van-cell-group inset :model="registerForm">
          <van-field
            v-model="registerForm.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '用户名不能为空' }]"
          />

          <van-field
            v-model="registerForm.password"
            name="password"
            label="密码"
            placeholder="密码"
            type="password"
            :rules="[{ required: true, message: '密码不能为空' }]"
          />
          <van-field name="sex" label="性别">
            <template #input>
              <van-radio-group
                v-model="registerForm.sex"
                direction="horizontal"
              >
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="image" label="头像上传" v-model="registerForm.image">
            <template #input>
              <van-uploader
                v-model="value"
                result-type="file"
                :after-read="readFile"
              />
            </template>
          </van-field>
          <van-field
            name="phone"
            v-model="registerForm.phone"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '电话不能为空' }]"
          />
          <van-field
            name="email"
            v-model="registerForm.email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '邮箱不能为空' }]"
          />
        </van-cell-group>

        <div style="margin: 16px">
          <van-button round block type="success" native-type="submit">
            注册
          </van-button>
        </div>
        <div style="margin: 16px">
          <van-button round block type="success" @click="cancel">
            返回
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getByUsername, create } from "@/api/api";
import { uploadFile } from "@/api/uploadApi";
export default {
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        sex: "1",
        image: "",
        phone: "",
        email: "",
      },
      value: [],
    };
  },
  methods: {
    register() {
      let number = parseInt(this.registerForm.phone);
      var phoneReg = /13[0-9]{9}/;
      var emailReg =
        /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if (!phoneReg.test(number) || !emailReg.test(this.registerForm.email)) {
        this.$Message.error("请输入正确的手机号或邮箱");
      } else {
        getByUsername({ username: this.registerForm.username }).then((res) => {
          if (res != "") {
            this.$Message.error("当前用户名已存在,请更换");
          } else {
            create(this.registerForm).then((res) => {
              if (res == true) {
                this.$Message.success("注册成功,请登录"),
                  setTimeout(() => {
                    this.$router.push({
                      name: "login",
                    });
                  }, 1000);
              } else {
                this.$Message.error(res);
              }
            });
          }
        });
      }
    },
    cancel() {
      this.$Message.info("用户取消注册");
      setTimeout(() => {
        this.$router.push(
          {
            name: "login",
          },
          1000
        );
      });
    },
    readFile(file) {
      uploadFile(file).then((res) => {
        this.registerForm.image = res.url;
        this.value.url = res.url;
      });
    },
  },
};
</script>

<style>
.demo-main {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/1.png");
  background-size: 100% 100%;
  position: fixed;
}
.demo-register {
  margin-top: 30%;
}
.demo-title {
  text-align: center;
  margin-bottom: 16px;
  font-family: 楷体;
  color: darkgoldenrod;
}
</style>
